Skip to main content

mapRange 映射數值與滑鼠追蹤

這是一個在範圍之間進行數值映射的實用函數

gsap.utils.mapRange(inMin, inMax, outMin, outMax, valueToMap)
名稱 Name型別 Type屬性 Attributes預設 Default描述 Description
inMinNumber初始範圍的下限
inMaxNumber初始範圍的上限
outMinNumber映射後範圍的下限
outMaxNumber映射後範圍的上限
valueToMapNumber要進行映射的數值

基本操作​

  1. 我現在有一個數值 945，假設該數值不會超過 1000
  2. 需要映射成 0 ~ 100
const x = gsap.utils.mapRange(
0, 1000, // 帶入值的最大與最小值
0, 100,  // 輸出值的最大與最小值
945 // 帶入值
) 

//expected output: 94.5

實務操作－追蹤滑鼠 mouse tracking​

<div class="cursor"></div>
.cursor {
  position: absolute;
  width: 62px;
  height: 62px;
  background-color: #F993CD;
  border-radius: 9999px
}
const handleMouseTrack = (e: MouseEvent) => {
    // 追蹤滑鼠水平位置（百分比）
    const x = gsap.utils.mapRange(0, window.innerWidth, 0, 100, e.clientX) 

    // 追蹤滑鼠垂直位置（百分比）
    const y = gsap.utils.mapRange(0, window.innerHeight, 0, 100, e.clientY) 

    cursorEl.style.left = `${x}%`
    cursorEl.style.top = `${y}%`
}

document.addEventListener("mousemove", handleMouseTrack)
  1. 將滑鼠座標 (e.clientX, e.clientY) 映射為百分比，另一方面滑鼠座標垂直與水平最大值剛好就是視窗寬高 (window.innerWidth, window.innerHeight)
  2. 將滑鼠座標百分比賦予到 cursorEl 的 style 屬性 top、left

補充說明：​

控制 DOM 元素 style 屬性的方式​

這是原生 web api 寫法

cursorEl.style.left = `${x}%`
cursorEl.style.top = `${y}%`

也可以使用 gsap 來賦予 cursorEl 座標位置

gsap.set(cursorEl, {
    left: `${x}%`,
    top: `${y}%`
})

不使用 mapRange－以計算百分比為例​

如果不使用 mapRange 的話，也可以用原生 js 的方式來計算百分比

document.addEventListener('pointermove', (e) => {
    let x = parseInt(e.clientX / window.innerWidth * 100);
    let y = parseInt(e.clientY / window.innerHeight * 100);
});